<script setup>
import { ref } from "vue"
import * as funPermission from "@/apis/system/permission"

const emits = defineEmits(["refreshData"])
const showDialog = ref(false)
const dialogData = ref({})
const queryParams = ref({
    providerName: "R",
    providerKey: ""
})
const allPermissions = ref([])

const open = (row) => {
    queryParams.value.providerKey = row.name
    funPermission.getPermissions(queryParams.value).then(res => {
        allPermissions.value = res.groups.map(x => {
            x.isAllChecked = true
            x.permissions = x.permissions.map(p => {
                p.isIndeterminate = false
                if (x.isAllChecked) {
                    x.isAllChecked = p.isGranted
                }
                return p
            })
            return x
        })
        showDialog.value = true
    })
}

// 角色选中时，判断有下级则全部选择
const checkAll = (val, item) => {
    item.permissions = item.permissions.map(x => {
        x.isGranted = val
        return x
    })
}

const onChange = (val, pitem, item) => {
    // 角色选中时，判断有下级则全部选择
    item.permissions = item.permissions.map(x => {
        if (val && x.parentName && x.parentName.indexOf(pitem.name) !== -1) {
            x.isGranted = true
        }
        return x
    })
    // 判断全选按钮是否选中
    let isAllChecked = true
    for (let i in item.permissions) {
        if (!item.permissions[i].isGranted) {
            isAllChecked = false
            break
        }
    }
    item.isAllChecked = isAllChecked
}

const _save = () => {
    let commitData = JSON.parse(JSON.stringify(queryParams.value))
    commitData.permissions = []
    for (let i in allPermissions.value) {
        allPermissions.value[i].permissions.map(x => {
            commitData.permissions.push({
                name: x.name,
                isGranted: x.isGranted
            })
        })
    }
    $Common.fullLoading()
    funPermission.updatePermissions(commitData).then(res => {
        commonSuccess()
    })
}

const _close = () => {
    showDialog.value = false
}

const commonSuccess = (val) => {
    let tips = val || "操作成功!"
    $Common.alert(tips).then(() => {
        _close()
        $Common.closeFullLoading()
        emits("refreshData", true)
    })
}

// 暴露给父组件
defineExpose({
    open
})
</script>

<template>
    <el-dialog title="设置角色权限" class="c-el-dialog comp-role-permission-dialog" v-model="showDialog"
        :draggable="true" :before-close="_close" :close-on-click-modal="false" :append-to-body="true">
        <el-tabs tab-position="left">
            <el-tab-pane :label="item.displayName" v-for="item in allPermissions" :key="item.name">
                <div class="role-content">
                    <div class="mrgb15">
                        <el-checkbox v-model="item.isAllChecked" @change="(v) => { checkAll(v, item) }">全选</el-checkbox>
                    </div>
                    <div v-for="pitem in item.permissions" :key="pitem.name"
                        class="mrgt5 mrgb5" :class="{ 'mrgl20': pitem.parentName }">
                        <el-checkbox v-model="pitem.isGranted" :indeterminate="pitem.isIndeterminate"
                            @change="(v) => { onChange(v, pitem, item) }">
                            {{ pitem.displayName }}
                        </el-checkbox>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <template #footer>
            <el-button @click="_close()">关闭</el-button>
            <el-button type="primary" plain @click="_save()">保存</el-button>
        </template>
    </el-dialog>
</template>

<style lang="scss">
.comp-role-permission-dialog {
    margin-top: 6vh !important;
    width: 88%;
    max-width: 820px;
    .role-content {
        margin: 10px 15px;
        .el-checkbox {
            height: 26px;
        }
    }
}
</style>